<template>
  <a-tooltip placement="bottom">
    <template slot="title">
      <span>选择主题</span>
    </template>
    <div class="menu-item">
      <a-popover title="设置主题" trigger="click">
        <template slot="content">
          <div class="theme-setting">
            <input type="color" v-model="themeColor" />
            <a-button @click="changeThemeColor('#1890ff')">恢复默认</a-button>
          </div>
        </template>
        <a-icon class="icon" type="bg-colors" />
      </a-popover>
    </div>
  </a-tooltip>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
export default {
  methods: {
    ...mapActions({
      changeThemeColor: "global/changeThemeColor"
    })
  },
  computed: {
    // 主题色
    themeColor: {
      get() {
        return this.$store.getters.themeColor;
      },
      set(val) {
        this.changeThemeColor(val);
      }
    }
  },
  watch: {
    // 监视主题色的变化
    themeColor: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.changeThemeColor(newVal);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.theme-setting {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  input[type="color"] {
    width: 50%;
    margin-right: 10px;
  }
}
</style>
